import React, {Component,} from 'react';
import './DateTabs.css';
import {connect,} from 'react-redux';
import {formatDate, handleDateChange,getWeekDayFromDateString,} from "../../utils/dateService";
import FootballGameCard from "../FootballGameCard/FootballGameCard";

class DateTabs extends Component{
    constructor(props) {
        super(props)
        this.today = this.props.today
    }

    // componentDidMount() {
    //     console.log('DateTabs')
    // }
    //
    // componentDidUpdate(prevProps, prevState, snapshot) {
    //     console.log('update')
    // }

    onTabSelected = index => {
        this.props.onTabSelected(index)
    }

    formatTitle = title => {
        // return title
        const arr = title.split('-')
        const m = arr[1]
        const d = arr[2]
        return `${m}月${d}日`
        return title
    }

    render() {
        const tabs = this.props.tabs

        const tabBar = (
            <div
                className='flex-space-between-align-center'
                style={{
                    height: '44px',
                    backgroundColor: 'rgba(248,248,248,1)',
                    // paddingBottom: '4px',
                    paddingTop: '4px',
                }}
            >
                {tabs.map((tab, index) => {
                    const active = this.props.activeIndex !== undefined ? this.props.activeIndex === index : tab.active
                    const value = tab.value
                    const isToday = value === this.today
                    const title = isToday ? '今天' : this.formatTitle(tab.title)
                    const weekDay = getWeekDayFromDateString(isToday ? '今天' : tab.title)
                    const tabItem = (
                        <div
                            className='flex-center-align-center flex-column'
                            style={{
                                backgroundColor: active ? 'rgba(248,248,248,1)' : '#fff',
                                height: '100%',
                                width: '24.9%',
                            }}
                            key={index}
                            onClick={() => this.onTabSelected(index)}
                        >
                            <div
                                className='flex-center-align-center flex-column'
                                style={{
                                    color: active ? '#FFA500' : '#333333',
                                    opacity: active ? '1' : '0.6',
                                }}>
                                <p>{isToday ? null : weekDay}</p>
                                <p>{title}</p>
                            </div>
                        </div>
                    )
                    return tabItem
                })}
            </div>
        )

        return tabBar
    }
}
//
// const mapState = state => ({
//     game: state.game,
// })
export default DateTabs
// export default connect(mapState)(DateTabs)
